<template>
  <div class="bg_block">
    <div class="banner">
      <div class="banner_title">
        <div class="title_zh">祝2024年四周年庆典举办成功</div> 
        <div class="title_en">MAY THE 4TH ANNIVERSARY BE CELEBRATED IN 2024</div>
        <!-- <div class="title_en">FOURTH ANNIVERSARY CEKEVRATION</div> -->
      </div>
      <img :src="requireImg('banner2.png')" alt="" />
    </div>
    <div class="title_class">
      <img :src="requireImg('left.png')" alt="" />
      <div class="title_box">
        <div class="title_zh">福利</div>
        <div class="title_en">BONUS</div>
      </div>
      <img :src="requireImg('right.png')" alt="" />
    </div>
    <div class="draw_box">
      <img :src="requireImg('kuang.png')" class="kuang" alt="">
      <div class="cal_box">
        <div class="cal_item">
          <div class="cal_value">{{ toFixed(store.state.totalStakeAmount)}} <span class="cal_name">算力</span></div>
      
          <div class="cal_title_box">
            <div class="cal_title">我的资产</div>
            <img class="cal_title_img" :src="requireImg('bottom.png')" alt="" />
          </div>
          <div class="about_u"  v-if="calU||receiveU" > 
            <span>≈ {{ calU }} U</span>  
          </div>
        </div>
        <div class="cal_item">
          <div class="cal_value">{{ store.state.releaseAmount }} <span class=""> {{ tokenName }}</span></div>
          
          <div class="cal_title_box">
            <div class="cal_title">待提收益</div>
            <img class="cal_title_img" :src="requireImg('bottom.png')" alt="" />
          </div>
          <div class="about_u" v-if="calU||receiveU">≈ {{ receiveU }} U</div>
        </div>
      </div>

      <div class="btn_box">
        <van-button class="btn" type="primary" :loading="loading" @click="withdraw">
          <div class="flex items-center">
            <span class="text-xl">{{ t("receive") }}</span>
          </div>
        </van-button>
      </div>
    </div>
    <div class="cele_box">
      <div>庆典之际，欢声笑语，共庆佳日</div>
      <div>愿此情此景，永载史册，祝福满满</div>
      <div>未来更加辉煌！</div>

    </div>
    <div class="footer">
      <img :src="requireImg('yan.png')" alt="" />
    </div>
  </div>
</template>
<script setup>
import { showToast } from "vant";
import "vant/es/toast/style";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { ethers } from "ethers";
import payEth  from "@/utils/payEth.js"
import {tokenName} from "@/utils/config.js"
import {payAbi} from "@/utils/abi/abi.js"
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const toUPrice = ref(0)
const loading = ref(false)
const state = reactive({
  data: null,
});
const toFixed = (value)=>{
  if(value){
    return Number(value).toFixed(0)
  }else{
    return 0
  }
}
const requireImg = (imgPath) => {
  return new URL(`../../assets/images/${imgPath}`, import.meta.url).href;
};
const initData = async (account) => {
  if (typeof window.ethereum !== 'undefined' || (typeof window.web3 !== 'undefined')) {
    // 用户正在使用 Web3 浏览器或连接了以太坊网络
  } else {
    // 用户没有连接 Web3 浏览器或以太坊网络
    showToast("请在WEB3的钱包DAPP内使用")
  }
    await  payEth.getUserInfo(account)
    toUPrice.value = await payEth.getPrice()
};
const calU = computed(()=>{
   return  parseFloat( Number((store.state.totalStakeAmount*toUPrice.value).toFixed(0))) 
})
const receiveU = computed(()=>{
   return parseFloat(Number((store.state.releaseAmount*toUPrice.value).toFixed(0))) 
})
initData();
const goToPage = (value, type) => {
  let query = {
    referrer: router.currentRoute.value.query.referrer,
  };
  router.push({
    name: value,
    query,
  });
};
const withdraw = async () => {
  if (!store.state.releaseAmount) {
    showToast(t('noExtract'))
    return
  }
  try {
    loading.value = true;
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = await provider.getSigner();
    const Contract = new ethers.Contract( payAbi.Contract,  payAbi.contractAbi,  provider);
    const ContractWithSinger = Contract.connect(signer);
    let hex = await ContractWithSinger.withdraw();
    await hex.wait();
    initData()
    showToast(t("extractSuccess"));
    loading.value = false;
  } catch (err) {
    showToast(t("extractFail"));
    loading.value = false;
  }
};
// 定时循环获取单聊数据
const intTime = setInterval(() => {
  initData()
},  1000 * 10)
onUnmounted(() => {
  clearInterval(intTime)
})
onMounted(() => {
  ethereum.on("accountsChanged", async function (accounts) {
    initData(accounts[0]);
  });
});
</script>

<style lang="scss" scoped>
.btn_box{
  padding: 20px 30px;
  .btn{
  height: 30px;
  border-radius: 6px;
  font-size: 12px;
  background: #ff3dfe;
}
}
.cele_box{
  text-align: center;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #fe3cfe;
  margin:30px 12px 10px 12px;
  line-height: 1.5;
  font-size: 14px;
  font-weight: bold;
  font-family:"PingFang SC",KaiTi,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
  color: #ff3dfe;
}
.bg_block {
  width: 100%;
  background: #151e3f;
  min-height: 100vh;
  box-sizing: border-box;
  .banner {
    position: relative;
    .banner_title{
      position: absolute;
      left: 16px;
      top: 28px;
      .title_zh{
        font-size: 16px;
        color: #fe3cfe;
        // font-style: italic;
        font-weight: bold;
      }
      .title_en{
        color: #b5c0cd;
        // font-style: italic;
        font-size: 8px;
      }
    }
    img {
      width: 100%;
    }
  }
  .footer{
    position: fixed;
    bottom: 0;
    img {
      width: 100%;
    }
  }
  .title_class {
    display: flex;
    margin-top: 16px;
    justify-content: center;
    align-items: center;
    .title_box {
      text-align: center;
      .title_zh {
        color: #fe3cfe;
        // font-style: italic;
        font-size: 14px;
        font-weight: bold;
      }
      .title_en {
        color: #fff;
        // font-style: italic;
        font-size: 8px;
      }
    }
    img {
      height: 25px;
    }
  }
  .draw_box {
    position: relative;
    .kuang{
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
    }
  }
  .cal_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    .cal_item {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .about_u{
        color: #eee;
        font-size: 10px;
      }
      .cal_value {
        color: #fe3cfe;
        font-weight: bold;
        font-size: 13px;
      }
      .cal_name {
        color: #fff;
        font-size: 8px;
        font-weight: 500;
      }
      .cal_title_box {
        min-width: 80px;
        margin-top: 5px;
        position: relative;
        img {
          height: 30px;
        }
        .cal_title {
          position: absolute;
          left: 50%;
          top: 40%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
      }
    }
  }
}
</style>
